<!DOCTYPE html>
<title>quick</title>
<html>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<style>
		#map {
			width: 500px;
			height: 500px;
		}
		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}
		.legend {
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
	</style>

	<body>

		<div id="map"></div>

		<script>
			function getColor(d) {
				return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0';
			}

			var map = L.map('map',{
			  center:[45.5411870, 10.2194440],
			  zoom: 11
			});
			// BS
			// key leaflet    BC9A493B41014CAABB98F0471D759707
			// key personal   0FBA3CCBEEB240B8B396A762A558E0BB // UPPERCASE e c'è voluto circa 24h per averla attiva
			// 997 day
			// 999 night
			L.tileLayer('http://{s}.tile.cloudmade.com/0FBA3CCBEEB240B8B396A762A558E0BB/999/256/{z}/{x}/{y}.png', {
				attribution : 'Map test svil', // Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>
				minZoom : 6,
				maxZoom : 16,
				zIndex: -1,
        		timestamp: 123
			}).addTo(map);

			var legend = L.control({
				position : 'bottomright'
			});

			legend.onAdd = function(map) {

				var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 20, 50, 100, 200, 500, 1000], labels = [];

				// loop through our density intervals and generate a label with a colored square for each interval
				for (var i = 0; i < grades.length; i++) {
					div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
				}

				return div;
			};

			legend.addTo(map);
			//alert(map.getBounds().toBBoxString());
		</script>
	</body>

</html>
